import React, { Component } from "react";
import "./index.css";
import Loading from "../../components/Loading";
import { Link } from "react-router-dom";
class GoodsList extends Component {
  state = {
    List: []
  };

  render() {
    return (
      <div>
        <div className="gl_header">
          <div className="s_top_goods">
            <div
              className="s_back"
              onClick={() => {
                this.props.history.go(-1);
              }}
            >
              <img
                src="http://www.hangowa.com/wap/images/arrow_left_b.png"
                alt=" "
              />
            </div>
            <div>
              <input
                type="text"
                placeholder="请输入关键字"
                className="s_search"
                onClick={() => {
                  this.props.history.go(-1);
                }}
              />
            </div>
            <div className="s_button">
              <button className="button_s">搜索</button>
            </div>
          </div>
        </div>

        <div className="gl_goodlist">
          {this.state.List.length === 0 ? <Loading /> : " "}
          <div className="gl_list">
            <div />
            <ul>
              {/* 渲染点 */}

              {this.state.List.map((item, index) => {
                return (
                  <Link to={`/details/${item.goods_id}`} key={index}>
                    <li className="gl_list_gg" key={index}>
                      <div className="gl_list_left">
                        <img src={item.goods_image_url} alt="" />
                      </div>
                      {item.name === "AA" ? (
                        <div className="sg_nogoods">
                          <div className="sg_zhongjian">
                            <div className="sg_nogoods_img">
                              <img
                                src="http://www.hangowa.com/wap/images/search_ico.png"
                                alt=""
                              />
                            </div>
                            <div className="sg_nogoods_p">
                              <h2>没有相关的商品</h2>
                              <p>选择或搜索其它的商品分类/商品的名称</p>
                              <button
                                onClick={() => {
                                  this.props.history.go(-1);
                                }}
                              >
                                重新选择
                              </button>
                            </div>
                          </div>
                        </div>
                      ) : (
                        " "
                      )}
                      <div className="gl_list_right">
                        {item.goods_jingle === "" ? (
                          ""
                        ) : (
                          <h4>{item.goods_jingle}</h4>
                        )}

                        {item.goods_jingle === "" ? (
                          <h4>{item.goods_name}</h4>
                        ) : (
                          <h5>{item.goods_name}</h5>
                        )}
                        <p className="gl_goods_price">￥ {item.goods_price} </p>
                        <div className="gl_goods_sales">
                          <div>
                            <span>销售</span>
                            <i className="saeles">{item.goods_salenum}</i>
                          </div>
                          <div>
                            <span>
                              {item.store_name}
                              <i>...</i>
                            </span>
                          </div>
                        </div>
                      </div>
                    </li>
                  </Link>
                );
              })}
            </ul>
          </div>
        </div>
      </div>
    );
  }
  // getGoodsList() {
  //   fetch(
  //     "http://www.hangowa.com/mo_bile/index.php?act=goods&op=goods_list&keyword=%E9%94%85%E5%B7%B4&page=10&curpage=1&keyword=%E9%94%85%E5%B7%B4"
  //   )
  //     .then(response => response.json())
  //     .then(res => {
  //       if (res.code === 200) {
  //         this.setState({
  //           List: res.datas.map(item => {
  //             return item.imgUrl;
  //           })
  //         });
  //       } else {
  //         alert("网络异常");
  //       }
  //     });
  // }
  // componentDidMount() {
  //   this.getGoodsList();
  // }
  getGoodsList() {
    let Name = this.props.match.params.name;

    let goodsName = {
      name: Name
    };
    let url = `http://www.hangowa.com/mo_bile/index.php?act=goods&op=goods_list& 
    keyword=${goodsName.name}&page=${200}&curpage=1&keyword=${goodsName.name}`;
    fetch(url)
      // fetch(
      //   "http://www.hangowa.com/mo_bile/index.php?act=goods&op=goods_list& keyword=%E9%94%85%E5%B7%B4&page=10&curpage=1&keyword=%E9%94%85%E5%B7%B4"
      // )
      .then(response => response.json())
      .then(res => {
        let str = res.datas.goods_list;
        console.log(str);
        if (res.code === 200 && str.length !== 0) {
          this.setState({
            List: res.datas.goods_list
          });
          console.log(res.datas.goods_list);
        } else {
          let AA = [
            {
              name: "AA"
            }
          ];
          this.setState({
            List: AA
          });
        }
        // if (res.code === 200) {
        //   this.setState({
        //     List: res.datas.goods_list
        //   });
        //   console.log(res.datas.goods_list);

        // } else {
        //   alert(res.msg);
        // }
      });
  }
  componentDidMount() {
    this.getGoodsList();
  }
}

export default GoodsList;
